<template>
  <demo-content :title="title">
    <p></p>
    <div style="display: flex; flex-wrap: wrap">
      <div v-for="(t, i) of operations">
        <div>{{ t }}</div>
        <canvas ref="canvasRef" width="150" height="150"></canvas>
      </div>
    </div>
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

const title = "组合设置";
// 指定组件上的属性
defineOptions({ title });

const canvasRef = ref<HTMLCanvasElement[]>([]);
const operations = [
  "source-over",
  "source-in",
  "source-out",
  "source-atop",
  "destination-over",
  "destination-in",
  "destination-out",
  "destination-atop",
  "lighter",
  "copy",
  "xor",
  "multiply",
  "screen",
  "overlay",
  "darken",
  "lighten",
  "color-dodge",
  "color-burn",
  "hard-light",
  "soft-light",
  "difference",
  "exclusion",
  "hue",
  "saturation",
  "color",
  "luminosity",
];
onMounted(() => {
  for (let i = 0; i < operations.length; i++) {
    const canvas = canvasRef.value![i];
    const ctx = canvas.getContext("2d")!;

    ctx.fillStyle = "red";
    ctx.fillRect(0, 10, 100, 100);
    ctx.globalCompositeOperation = operations[i] as any;
    ctx.fillStyle = "green";
    ctx.fillRect(50, 50, 100, 100);
    ctx.restore();
  }
});
</script>

<style src="./default.css" scoped></style>
